import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Input, Row, Col, Spin } from 'antd';
import styles from './password.css'

const FormItem = Form.Item;


class Password extends Component {

    constructor(props) {
        super();
        this.state = {
            spinState: false
        }
    }

    componentWillMount() {
        clearInterval(global.timer);
    }


    handleSubmit = (msg) => {
        this.props.form.validateFields(
            (err, value) => {
                if (!err) {
                    value.Threestate = true; // 添加 第三页跳转标志
                    this.props.dispatch({
                        type: 'cardProcess/pwd',
                        payload: value
                    })
                }
            }
        )
    }
    componentWillReceiveProps(nextProps) {
        const data = nextProps.data;
        if (data.spinState) {
            this.setState({ spinState: true });
        }
    }

    /**
     *  验证两次输入的密码
     * @param rule
     * @param value
     * @param callback
     */
    checkPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码输入不一致！');
        } else {
            callback();
        }
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },

        };
        const { height } = this.props;
        return (
            <div className={styles.container}>
                {
                    !this.state.spinState ?
                        <div>
                            <p className={styles.title}>交易密码设置：</p>
                            <Form onSubmit={this.handleSubmit} className={styles.from}>
                                <div className="inputItem">
                                    <Row gutter={16}>
                                        <Col span={18}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="设置密码"
                                                hasFeedback
                                            >
                                                {getFieldDecorator('password', {
                                                    rules: [
                                                        { required: true, message: '请输入密码！' },
                                                        { pattern: /^[0-9]{6}$/, message: '请输入符合规则的密码！' }
                                                    ],
                                                    validateFirst: true,
                                                    // initialValue: '888888'
                                                })(
                                                    <Input placeholder="请输入密码" maxLength='6' type='password' />
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </div>
                                <div className="inputItem">
                                    <Row gutter={16}>
                                        <Col span={18}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="确认密码"
                                                hasFeedback
                                            >
                                                {getFieldDecorator('passwordAgain', {
                                                    rules: [
                                                        { required: true, message: '请输入确认密码!' },
                                                        { validator: this.checkPassword }

                                                    ],
                                                    validateFirst: true,
                                                    // initialValue: '888888'
                                                })(
                                                    <Input placeholder="请输入确认密码" maxLength='6' type='password' />
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </div>
                                <div>
                                    <Row>
                                        <Col span={18}>
                                            <Row>
                                                <Col span={6}></Col>
                                                <Col span={18} className={styles.msg}>
                                                    <span>温馨提示：请妥善保管好您的交易密码，不要告知他人！</span>
                                                </Col>
                                            </Row>
                                        </Col>
                                    </Row>
                                </div>
                            </Form>
                        </div>
                        :
                        <div className="example" style={{ height: height -15, textAlign: 'center' }}>
                            <Spin tip='正在处理中，请稍后...' size='large' style={{ position: 'absolute', top: '50%',left:'50%',marginTop:'-29px',marginLeft:'-68px' }} />
                        </div>
                }
            </div>
        );
    }
}
Password = Form.create({})(Password);
function mapStateToProps(state) {
    const data = state.cardProcess;
    return { data };
}
export default connect(mapStateToProps)(Password);